// 封装可复用的逻辑 监听滚动事件  scroll
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
// 引入监听懒加载的方法  useIntersectionObserver
// 倒计时api  useIntervalFn
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
export function useWindowScroll () {
  const YRef = ref(0)
  // 书写逻辑
  window.addEventListener('scroll', () => {
    // 拿到当前滚动的距离  交给响应式的YRef
    YRef.value = document.documentElement.scrollTop
  })
  return {
    y: YRef
  }
}

// 封装监听函数
export function useObserve (apiFn) {
  const target = ref(null)
  // stop是一个可执行的函数 用来手动停止监听函数
  // 不管元素进入还是离开视口区域都不会再执行回调函数
  const { stop } = useIntersectionObserver(
    // 监听目标元素
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting: 当前监听的元素是否成功进入到视口区域 如果进来了就是true 否则就是false
      // observerElement 被观察的dom
      // console.log(isIntersecting)
      // 有了一个判断是否进入视口区域的条件 如果是true  代表进入了视口区域 发起请求
      if (isIntersecting) {
        // 可能随着业务的不同 调用接口的方法也不同
        apiFn()
        // 发送请求之后  立刻停止监听
        stop()
      }
      // 监听处理不是只一次进行的 每次进入移除视口都会再次执行回调  所以需要手动关闭
    },
    // 进入可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
    { threshold: 0 }
  )
  return {
    target
  }
}

// 封装倒计时逻辑函数
export function useCountDown () {
  // 倒计时核心逻辑  每隔1s让countTime-1  setInterval countTime--
  const countTime = ref(0)
  // 定义格式化好的时间
  const formatCountTime = computed(() => {
    // 完成转换逻辑
    return dayjs.unix(countTime.value).format('mm分ss秒')
  })
  // 给到我们的功能:  每隔1s执行我们自己的逻辑  导出两个方法
  // pause  函数 停止倒计时
  // resume 函数 开始倒计时
  const { pause, resume } = useIntervalFn(() => {
    /* your function */
    if (countTime.value === 0) return
    countTime.value--
  }, 1000)

  function start (time) {
    countTime.value = time
    // 开始倒计时
    resume()
  }
  function stop () {
    // 停止倒计时
    pause()
  }
  return {
    countTime,
    formatCountTime,
    start,
    stop
  }
}
